<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:composition> 

        <h:form>		

            <p:panel  header="Edicion del usuario #{backofficeUserManagedBean.selectedUser.email}" style="text-align: center;margin-bottom:10px;">
                <c:set value="#{sessionScope.extra1}" var="user"/>

                <p:tabView id="tabView">  

                    <p:tab id="myAccount" title="Datos personales" >  



                        <h:form>

                            <h:form id="formSignup">  

                                <p:panel id="panelSignup" header="Cuenta" style="width: 40%;margin: auto">  

                                    <p:messages id="msgsSignup" closable="true"/>  

                                    <h:panelGrid columns="3" >  

                                        <h:outputLabel for="password" value="Contraseña: " />  
                                        <p:password id="password" value="#{backofficeUserManagedBean.pass1}" feedback="true" size="30" maxlength="15" label="Password" > 

                                            <p:ajax update="msgPassword2" event="keyup" />
                                        </p:password>

                                        <p:tooltip for="password" value="Para mantener la misma contraseña omita los dos primeros campos" showEffect="slide" hideEffect="slide" />  

                                        <h:outputLabel for="password2" value="Rep. Contraseña: " />  
                                        <p:password id="password2" value="#{backofficeUserManagedBean.pass2}" size="30" maxlength="15" label="Rep. Password" > 

                                            <p:ajax update="msgPassword2" event="keyup" />
                                        </p:password>
                                        <p:message for="password2" id="msgPassword2" display="icon" />  



                                        <h:outputLabel for="name" value="Nombre: "  />  
                                        <p:inputText id="name" value="#{user.name}" size="30" maxlength="255" label="Nombre" required="true" >  
                                            <p:watermark for="name" value="Ej. Alejandro"/>
                                            <f:validateLength minimum="3" />  
                                            <p:ajax update="msgName" event="keyup" />
                                        </p:inputText>  
                                        <p:message for="name" id="msgName" display="icon"/>  

                                        <h:outputLabel for="surname" value="Apellidos: "  />  
                                        <p:inputText id="surname" value="#{user.surname}" size="30" maxlength="255" label="Apellidos" required="true" >  
                                            <p:watermark for="surname" value="Ej. Molina"/>
                                            <f:validateLength minimum="3" />  
                                            <p:ajax update="msgSurname" event="keyup" />
                                        </p:inputText>  
                                        <p:message for="surname" id="msgSurname" display="icon"/> 

                                        <h:outputLabel for="phone" value="Teléfono: "  />  
                                        <p:inputText id="phone" value="#{user.phone}" size="30" validatorMessage="El número de teléfono solo puede contener números y una longitud mínima de 9 dígitos" maxlength="255" label="Telefóno" required="true" >  
                                            <p:watermark for="phone" value="Ej. 67807XXXX"/>
                                             <f:validateRegex pattern="[0-9]{9}[0-9]*"/>
                                            <p:ajax update="msgPhone" event="keyup" />
                                        </p:inputText>  
                                        <p:message for="phone" id="msgPhone" display="icon"/> 

                                        <h:outputLabel for="address" value="Dirección: "  />  
                                        <p:inputTextarea rows="4" cols="30"  counter="counter" counterTemplate="{0} caracteres restantes." id="address" value="#{user.address}"  maxlength="255" label="Dirección" required="true" >  
                                            <p:watermark for="address" value="Ej. C. de la Piruleta Nº 123              CP: 41008 Sevilla"/>
                                            <f:validateLength minimum="6" />  
                                            <p:ajax update="msgAddress" event="keyup" />
                                        </p:inputTextarea>  
                                        <p:message for="address" id="msgAddress" display="icon"/> 
                                        <p:spacer width="40" height="10" />
                                        <h:outputText id="counter" style="font-size:10px" />
                                        <p:spacer width="10" height="10" />

                                         <p:outputLabel value="Rol:"/>
                                        <p:selectOneRadio id="Rrol" value="#{user.permission}">
                                            <f:selectItem itemLabel="Usuario" itemValue="1" />
                                            <f:selectItem itemLabel="Administrador" itemValue="2" />

                                        </p:selectOneRadio>
                                        <p:spacer width="1" height="1" />

                                        <p:outputLabel value="Estado:"/>
                                        <p:selectOneRadio id="Rstatus" value="#{user.status}">
                                            <f:selectItem itemLabel="Activo" itemValue="1" />
                                            <f:selectItem itemLabel="Eliminado" itemValue="0" />
                                        </p:selectOneRadio>
                                        <p:spacer width="1" height="1" />

                                    </h:panelGrid>  
                                    
                                    <p:commandButton id="btnUp" value="Guardar" update="panelSignup" action="#{backofficeUserManagedBean.saveProfile(user)}" style="margin: auto" />  


                                </p:panel>  

                            </h:form>  



                        </h:form>



                    </p:tab>  

                    <p:tab id="purchases" title="Historial de compras">  
                        <h:panelGrid columns="2" cellpadding="10" style="margin: auto">  

                            <h:form id="form">  



                                <p:dataTable id="carsTable" var="purchase" value="#{backofficeUserManagedBean.bcPurchases()}" >  



                                    <f:facet name="header" >  
                                        Expande las compras para mas información.
                                    </f:facet>  

                                    <p:column style="width:3%">  
                                        <p:rowToggler />  
                                    </p:column>  

                                    <p:column style="width:40%;text-align: center">  
                                        <f:facet name="header">  
                                            Ref. de compra  
                                        </f:facet>  
                                        <h:outputText value="#{purchase.idPurchase}"/>  
                                    </p:column>  

                                    <p:column style="width:195px;text-align: center">  
                                        <f:facet name="header">  
                                            Fecha  
                                        </f:facet>  
                                        <h:outputText value="#{utilsBean.formatDate(purchase.purchaseDate)}" />  
                                    </p:column>  
                                    <p:column style="text-align: center">  
                                        <f:facet name="header">  
                                            Articulos distintos comprados 
                                        </f:facet>  
                                        <h:outputText value="#{purchase.numberItemsPurchased()}" />  
                                    </p:column> 

                                    <p:column style="text-align: center">  
                                        <f:facet name="header">  
                                            Cantidad total de artículos comprados 
                                        </f:facet>  
                                        <h:outputText value="#{purchase.quantityItemsPurchased()}" />  
                                    </p:column> 

                                    <p:column style="width:18%;text-align: center">  
                                        <f:facet name="header">  
                                            Total  
                                        </f:facet>  
                                        <h:outputText value="#{purchase.total()} €" />  
                                    </p:column> 

                                    <p:rowExpansion>  
                                        <h:panelGrid id="display" columns="2" cellpadding="4" style="width:100%;"  
                                                     styleClass=" ui-widget-content grid">  

                                            <p:dataTable var="iPurchase" value="#{purchase.itemPurchase}" style="width: 100%">  
                                                <p:column headerText="Articulo" style="width: 60%;text-align: center">  
                                                    <h:outputText value="#{iPurchase.item.name}" />  
                                                </p:column>  

                                                <p:column headerText="Cantidad" style="width: 20%;text-align: center">  
                                                    <h:outputText value="#{iPurchase.quantity}" />  
                                                </p:column>  

                                                <p:column headerText="Precio Ud." style="width: 20%;text-align: center">  
                                                    <h:outputText value="#{iPurchase.price} €" />  
                                                </p:column>  


                                            </p:dataTable>
                                        </h:panelGrid>  

                                    </p:rowExpansion>  
                                </p:dataTable>  
                            </h:form>  
                        </h:panelGrid>  
                    </p:tab>  


                </p:tabView>    
            </p:panel>
        </h:form>


    </ui:composition>
</html>
